body{
  font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
  color: #333;
  background-color:#f5f5f5;
  min-width: 1226px;
}
.H-jd{
  width:1349px;
  height: 100%;
  background:#f5f5f5;
  margin-top: 35px;
}
.w{
  height: 100%;
  //border: 1px solid;
  position: relative;
}
.H-nav{
  width: 1226px;
  height: 58px;
  background: #f5f5f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:10px 0;
  h3{
    font-size: 20px;
  }
  ul{
    width:280px;
    display: flex;
    justify-content: space-around;
    a{
      border-bottom: 2px solid #f5f5f5;
      font-size: 16px;
    }
    a:hover{
      color: #ff6700;
      border-bottom: 2px solid #ff6700;
    }
  }

}

//.H-con{
//      width: 1226px;
//      height:614px;
//     //border: 1px solid;
//      display: flex;
//      justify-content:space-between;
//      margin:0 auto;
//      background: #f5f5f5;
//  div{
//    background: white;
//    width: 234px;
//    height: 300px;
//    margin-top: 7px;
//    //text-align: center;
//
//    .ohh{
//       position: relative;
//      text-align: center;
//      overflow: hidden;
//      margin-top: 7px;
//      transition: all .5s;
//        .ptn{
//            width: 234px;
//            height:60px;
//            position: absolute;
//            bottom:-30%;
//            left:0;
//            background: #ff6700;
//            //z-index: 100;
//            transition: all .8s;
//            text-align: center;
//            line-height: 80px;
//          p:first-child{
//            position: absolute;
//            left: 25%;
//            color:#fff;
//          }
//          p:last-child{
//            color: rgba(255,255,255,0.6);
//          }
//        }
//      &:hover{
//        transform: translateZ(10px);
//        .ptn{
//          bottom: 0%;
//        }
//      }
//
//
//      p:first-child{
//        margin-top:-20px;
//        color: #333;
//        z-index: 10;
//      }
//      p:nth-child(3){
//        color: #C2C2C2;
//        z-index: 10;
//        font-size: 14px;
//      }
//      p:nth-child(4){
//        span{
//          z-index: 10;
//          color: #ff6700;
//        }
//        color: #C2C2C2;
//      }
//
//    }
//  }
//
//
//}
.H-quan{
  width: 1226px;
  margin: 0 auto;
  //border: 1px solid;
  display: flex;
  background:#f5f5f5;
  position: relative;
  div{
    width:234px;
    height: 614px;
    display: flex;
    transition:all .3s;
    &:hover{
      //transform: translate(-5px,-5px);
      //width: 235px;
      //height: 615px;
      box-shadow: 5px 5px 5px 5px #CCCCCC;
    }
    img{
      width: 100%;
      height: 100%;
    }
  }
  .H-bian{
    width:984px;
    height:614px;
    position: absolute;
    display: none;
    left:240px;
    top: 0;
    display: flex!important;
    padding-top:0 ;
    //border: 1px solid red;
    justify-content:space-between!important;
    flex-wrap:wrap!important;
    li{
      width:240px;
      height:49.5%;
      margin-bottom: 5px;
      background: white;
      //border: 1px solid blue;
      text-align: center;
      transition: all .5s;
      &:hover{

        transform:translate(-5px,-5px) ;
      }

      p{
        color: #ff6700;
      }
      p:nth-child(2){
        color: black;
      }
      p:nth-child(3){
        color: #c2c2c2;
      }
      p:nth-child(4){
        color: #ff6c30;
      }
      div{
        width: 100%;
        height: 49%;
        //border: 1px solid yellow;
        display: flex;
        align-items: center;
        background: white;
        justify-content: space-around;
        margin-bottom: 5px;
        transition: all .3s;
        p{
          color: #212425; span{
          color: #ff6700;
        }
        }

        &:hover{
          box-shadow: 0px 0px 10px 5px #D9D0D0;
          transform: translate(0,-3px);
        }
        img{
          width: 50%;
          height: 50%;
        }
      }
    }
  }
}
.active{
  color: #ff6700;
  border-bottom:2px solid #ff6700;
}
.icon-xiajiang{
  color: #ff6700 !important;
  font-size:60px;
}





















